<template>
	<div v-show="diyShow">
		<div class="title">
			首页轮播图设置
			<span class="title-tips">图片至少添加1个，最多添加8个</span>
		</div>
		<el-form class="mt-4 w-[420px]" label-width="90px">
			<el-card class="content mb-4" shadow="never">
				<div class="sub-title">样式设置</div>
				<el-form-item label="图片高度：">
					<el-input v-model="formData.style.height" placeholder="请输入图片高度">
						<template #append> px </template>
					</el-input>
					<div class="el-form-tips">请上传相同比例图片，建议尺寸：750*350</div>
				</el-form-item>
			</el-card>
			<el-card class="content mb-4" shadow="never">
				<div class="sub-title">图片设置</div>
				<div class="mb-[18px]">
					<draggable class="draggable" v-model="formData.list" animation="300" draggable=".draggable" :move="onMove">
						<template v-slot:item="{ element, index }">
							<div class="sub-item max-w-[400px] cursor-pointer" :class="{ draggable: index != 0 }">
								<div class="close-btn" @click="handleDelete(index)">
									<SvgIcon name="ele-Close" size="12" />
								</div>
								<div class="bg-fill-light w-full p-4 mt-4">
									<el-form-item label="图片：">
										<imageUpload v-model="element.image_url" :limit="1" />
									</el-form-item>
									<el-form-item label="链接地址：">
										<linkSelect v-model="element.link" :type="1" />
									</el-form-item>
								</div>
							</div>
						</template>
					</draggable>
				</div>
				<div>
					<el-form-item v-if="formData.list?.length < tabbarLimit.max" label-width="0">
						<el-button class="w-[100%]" type="primary" @click="handleAdd"> 添加图片 </el-button>
					</el-form-item>
				</div>
			</el-card>
		</el-form>
	</div>
</template>

<script lang="ts" setup name="diyHomebanner">
import { ref, reactive, watch } from 'vue';
import { diyGetHomePage } from '/@/api/diy';
import { messageError } from '/@/utils/message';
import Draggable from 'vuedraggable';

const diyShow = ref(true);

const tabbarLimit = reactive({
	max: 8,
	min: 1,
});

const formData = reactive({
	style: {
		height: '',
	},
	list: [
		{
			image_url: '',
			link: '',
		},
	],
});

const emit = defineEmits(['getData']);

watch(
	formData,
	() => {
		emit('getData', formData);
	},
	{ immediate: true }
);

const handleAdd = () => {
	if (formData.list?.length < tabbarLimit.max) {
		formData.list.push({
			image_url: '',
			link: '',
		});
	} else {
		messageError(`图片最多添加${tabbarLimit.max}个`);
	}
};

const handleDelete = (index: number) => {
	if (formData.list?.length <= tabbarLimit.min) {
		return messageError(`图片最少保留${tabbarLimit.min}个`);
	}
	formData.list.splice(index, 1);
};

const onMove = (e: any) => {
	if (e.relatedContext.index == 0) {
		return false;
	}
	return true;
};

const getData = async () => {
	const data = await diyGetHomePage({ type: 1 });
	const imageData = data.data?.image;
	if (imageData) {
		for (const key in formData) {
			if (imageData[key] != null && imageData[key] != undefined) {
				formData[key] = imageData[key];
			}
		}
	}
	emit('getData', formData);
};

const setData = (imageData: any) => {
	for (const key in formData) {
		if (imageData[key] != null && imageData[key] != undefined) {
			formData[key] = imageData[key];
		}
	}
	emit('getData', formData);
};

const changeDiv = (show: boolean) => {
	diyShow.value = show;
};

defineExpose({
	getData,
	setData,
	changeDiv,
});
</script>
<style lang="scss" scoped></style>
